<template>
	<div class="content">
		<div class="boxs">
			<div class="title">抽签设置</div>
			<div class="lines">
				<span class="span">抽签时间:</span>
				<div class="boxes">
					<input :placeholder-class="hassubmit && startTime == '' ? 'reds' : ''" v-model="startTime"
						class="inputs" placeholder="请选择抽签时间" @click="onShowDatePicker()" />
				</div>
			</div>
			<!-- <div class="lines">
				<span class="span">抽签名单:</span>
				<div class="boxes">
					<textarea :placeholder-class="hassubmit && nameList ? 'reds' : ''" class="textarea"
						placeholder="请输入抽签号码以空格号隔开" v-model="nameList"></textarea>
				</div>
			</div> -->
			<!-- <div class="lines">
				<span class="span">抽签名单:</span>
				<div class="boxes">
					<textarea class="textarea" placeholder="请输入抽签名单以空格号隔开" v-model="mingdan"></textarea>
				</div>
			</div> -->
			<div class="lines">
				<span class="span">内定名单:</span>
				<div class="boxes">
					<textarea placeholder="请输入内定名单以空格号隔开" class="textarea" v-model="teamList"></textarea>
				</div>
			</div>
			<div class="btns">
				<img mode="heightFix" src="@/assets/images/btn2.png" />
				<div class="words" @click="submits">提交设置</div>
			</div>
		</div>

		<div class="tan" v-if="messages != ''">
			<div>{{ messages }}</div>
		</div>


		<!-- <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'" :end-text="'离店'"
			:show-seconds="true" @confirm="ed" @cancel="ed" /> -->
	</div>
</template>

<script>
import { importpage } from "@/api/index";

// import MxDatePicker from "../compotent/mx-datepicker.vue";
export default {
	data() {
		return {
			messages: "",
			nameList: "",
			title: 'Hello',
			value: '',
			showPicker: false,
			type: "datetime",
			teamList: "",
			hassubmit: false,
			startTime: ""//抽签时间,
		}
	},
	components: {
		// MxDatePicker
	},
	onLoad() {

	},
	methods: {
		parseNameNumberString(str) {
			// 1. 按逗号分割成 ["王总 112", "李总 100"]
			let pairs = []
			if (this.teamList.indexOf(",")) {
				pairs = str.split(',');
			}
			else if (this.teamList.indexOf("，")) {
				pairs = str.split('，');
			}
			console.log(pairs)
			// 2. 遍历每个键值对，按空格分割成 ["王总", "112"] 和 ["李总", "100"]
			return pairs.map(pair => {
				const [name, group] = pair.trim().split(/\s+/); // 使用正则匹配任意空格
				return { name, group };
			});
		},
		submits() {
			this.hassubmit = true
			let nameList = [];
			if (this.nameList.trim().indexOf("\n")) {
				nameList = this.nameList.trim().split("\n")
			}
			else if (this.nameList.trim().indexOf("\t")) {
				nameList = this.nameList.trim().split("\n")
			} else if (this.nameList.trim().indexOf(" ")) {
				nameList = this.nameList.trim().split(" ")
			}


			// 内定名单 
			// let teamList = [];
			// if (this.teamList.indexOf("\n")) {
			// 	teamList = this.teamList.split("\n")
			// }
			// else if (this.teamList.indexOf("\t")) {
			// 	teamList = this.teamList.split("\n")
			// } else if (this.names.indexOf(" ")) {
			// 	teamList = this.teamList.split(" ")
			// }

			if (this.startTime == '') {
				this.messages = "请选择抽签时间"
				setTimeout(() => {
					this.messages = "";
				}, 2000);
				return
			}
			// if (this.nameList == '') {
			// 	this.messages = "请选择抽签名单"
			// 	setTimeout(() => {
			// 		this.messages = "";
			// 	}, 2000);
			// 	return
			// }

			importpage({
				startTime: this.startTime,
				teamList: this.parseNameNumberString(this.teamList),
			}).then((res) => {
				this.messages = "设置成功"
				setTimeout(() => {
					this.message = ""
				}, 2000);
			});



		},
		onShowDatePicker() {//显示
			this.showPicker = true;
			this.value = this[this.type];
		},
		ed(e) {//选择
			this.showPicker = false;
			if (e) {
				this[this.type] = e.value;
				//选择的值
				this.startTime = e.value
				console.log('value => ' + e.value);
				//原始的Date对象
				console.log('date => ' + e.date);
			}
		}
	}
}
</script>

<style>
.reds {
	color: #ff0000;
	opacity: 1;
}

.whites {
	color: black;
}

.noopcity {
	opacity: 0;
	transition: all 0.5s;
}

.opcity1 {
	opacity: 1;
	transition: all 0.5s;
}

.tanbox {
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
}

.tan {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.6);
	border-radius: 10px;
	padding: 20px;
	width: 50%;
	color: white;
	text-align: center;
	border: solid 4px red;
	box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5);
}

.tishi {
	text-align: center;
	font-size: 30px;

}

.btns {
	width: 50%;
	display: block;
	margin: 0 auto;
	margin-top: 40px;
	line-height: 50px;
	position: relative;
}

.words {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	display: bg;
	text-align: center;
	font-size: 20px;
	line-height: 42px;
	color: white;
}

.btns img {
	display: block;
	height: 50px;
	margin: 0 auto;

}

.lines {

	margin-top: 40px;
}

.inputs {
	width: 100%;
	height: 44px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	margin-top: 13px;
	padding-left: 20px;
	outline: 10ne;
	box-sizing: border-box;
	border-color: #409eff;
	box-shadow: 0px 0px 10px rgba(113, 0, 0, 0.9);
}

.textarea {
	width: 100%;
	min-height: 150px;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	margin-top: 13px;
	padding: 13px;
	box-sizing: border-box;
	outline: 10ne;
	border-color: #409eff;
	box-shadow: 0px 0px 10px rgba(113, 0, 0, 0.9);
}


.boxes {
	width: 100%;
}

.span {
	color: balck;
	font-size: 20px;
}

.title {
	font-size: 40px;
	color: black;
	text-align: center;
	padding-top: 50px;
}

.boxs {

	position: relative;
	width: 90%;
	margin: 0 auto;
}

.box {
	width: 100%;
	height: 100%;
	display: block;
}

.content {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: url("@/assets/images/bgs2.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
</style>
